body { background-color: #f6f6f6 }

.nav-header { position: relative; z-index: 10000; height: 84px; }
.nav-header .layui-nav { position: absolute; right: 0; top: 0; padding: 0; background: none; }
.nav-header .layui-nav .layui-nav-item { margin: 0 20px; line-height: 84px; }
.nav-header-height { height: 84px; }
.layui-container { padding: 0; }

.nav-logo { position: absolute; left: 65px; top: 11px; }
.nav-logo-nav { margin-left: 100px; display: flex; align-items: center; }

.container-content { margin-top: 84px; }

.site-tree {  width: 200px; height: 744px; margin-top: 30px; border: 1px solid #e6e6e6; }
.site-content { width: 899px; min-height: 500px; padding: 20px 0 10px 20px; }
.site-tree, .site-content { display: inline-block; vertical-align: top; font-size: 14px; }

.site-tree .layui-nav  { background-color: #fff; }
.site-tree .layui-nav .layui-nav-item a { color: #999; text-align: center; border-bottom: 1px solid #e6e6e6; }
.site-tree .layui-nav .layui-this a { color: #333; }
.site-tree .layui-nav .layui-nav-item a:hover{ background-color:#fff; }
.layui-nav-tree .layui-this>a, .layui-nav-tree .layui-this>a:hover { background-color: #fff; color: #333; }

.layui-nav-tree .layui-this:before {
    content: '';
    top: auto;
    bottom: 0;
    height: 100%;
}

.layui-nav-tree .layui-nav-bar,
.layui-nav-tree .layui-this:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    background-color: #009688;
    transition: all .2s;
    -webkit-transition: all .2s;
}

@media screen and (max-width: 750px) {
    .nav-header .layui-main { width: auto; }
    .nav-header .layui-nav .layui-nav-item { margin: 0; }
    .nav-header .layui-nav .layui-nav-item a { padding: 0 20px; }
}